<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
	<style type="text/css">
		#p1{
			color: #ccc;
		}
		span{
			color: red;
		}
		#p2{
			color: greenyellow;
			line-height: 40px;
			padding: 0px;
			margin: 0px;
		}
		li{
			list-style: none;
		}
		input{
			width: 40px;
			height: 30px;
		}
		.b1{
			width: 70px;
		}
	</style>
	<body>
		<p id="p1">淘乐,发现更多生活,<span>快乐</span>就在你身边</p>
		<div style="width: 300px;height: 40px;display: flex;justify-content: space-between;">
			<p id="p2">近期热门......</p>
			<input type="button" value="更多" />
		</div>
		
			<li>言语之庭</li>
			<li>斯托克</li>
			<li>宿醉</li>
			<li>巨人捕手杰克</li>
			<li>副作用</li>
			<li>血肉之躯</li>
			<li>七号房的礼物</li>
			<li>惊声尖叫</li>
		
		<p>
			<input type="button" value="更多排名" class="b1" />
		</p>
	</body>
	<script>
		$("li:even").css("background-color","#ccc");
		$("li:contains('宿醉')").css("background-color","#FF99CC");
		$("li:gt(4)").hide();
		$("input[type='button']").click(function(){
			if($(this).val()=="更多"){
				$("li:hidden").show();
				$("input[value='更多']").val("收起");
				$("input[value='更多排名']").val("收起排名");
			}else if($(this).val()=="收起"){
				$("li:gt(4)").hide();
				$("input[value='收起']").val("更多");
				$("input[value='收起排名']").val("更多排名");
			}
			if($(this).val()=="更多排名"){
				$("li:hidden").show();
				$("input[value='更多排名']").val("收起排名");
				$("input[value='更多']").val("收起");
			}else if($(this).val()=="收起排名"){
				$("li:gt(4)").hide();
				$("input[value='收起排名']").val("更多排名");
				$("input[value='收起']").val("更多");
			}
			
		})
	</script>
</html>
